<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Home</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
    <link rel="stylesheet" href="plugins/bootstrap/4.2.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="plugins/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/toastr.min.css">
    <link rel="stylesheet" href="css/fontastic.css">
    <link rel="stylesheet" href="css/google.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">
    <link rel="stylesheet" href="css/custom.css">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" href="css/BeAlert.css">
    <link rel="stylesheet" href="plugins/bootstrap/bootstrap-select.min.css">
    <script src="plugins/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="plugins/respond/1.4.2/respond.min.js"></script>
</head>
<body>
<div class="page">
    <!-- Main Navbar-->
    <header class="header">
        <nav class="navbar" style="margin: 0">
            <!-- Search Box-->
            <div class="search-box">
                <button class="dismiss"><i class="icon-close"></i></button>
                <form id="searchForm" action="#" role="search">
                    <input type="search" placeholder="What are you looking for..." class="form-control">
                </form>
            </div>
            <div class="container-fluid">
                <div class="navbar-holder d-flex align-items-center justify-content-between">
                    <!-- Navbar Header-->
                    <div class="navbar-header">
                        <!-- Navbar Brand --><a href="index.html" class="navbar-brand1 d-none d-sm-inline-block">
                        <div class="brand-text d-none d-lg-inline-block" style="font-size: 20px;">
                            <span> </span><strong>DOCKER项目管理</strong></div>
                        <div class="brand-text d-none d-sm-inline-block d-lg-none"><strong>BD</strong></div>
                    </a>
                        <!-- Toggle Button--><a id="toggle-btn" href="#"
                                                class="menu-btn active"><span></span><span></span><span></span></a>
                    </div>
                    <!-- Navbar Menu -->
                    <ul class="nav-menu list-unstyled d-flex flex-md-row align-items-md-center" style="font-size: 16px;">
                        <!-- Search-->
                        <li class="nav-item d-flex align-items-center"><a id="search" href="#"><i
                                class="icon-search"></i></a></li>
                        <!-- Notifications-->
                        <li class="nav-item dropdown"><a id="notifications" rel="nofollow" data-target="#" href="#"
                                                         data-toggle="dropdown" aria-haspopup="true"
                                                         aria-expanded="false" class="nav-link"><i
                                class="fa fa-bell-o"></i><span class="badge bg-red badge-corner">12</span></a>
                            <ul aria-labelledby="notifications" class="dropdown-menu">
                                <li><a rel="nofollow" href="#" class="dropdown-item">
                                    <div class="notification">
                                        <div class="notification-content"><i class="fa fa-envelope bg-green"></i>You
                                            have 6 new messages
                                        </div>
                                        <div class="notification-time"><small>4 minutes ago</small></div>
                                    </div>
                                </a></li>
                                <li><a rel="nofollow" href="#" class="dropdown-item">
                                    <div class="notification">
                                        <div class="notification-content"><i class="fa fa-twitter bg-blue"></i>You have
                                            2 followers
                                        </div>
                                        <div class="notification-time"><small>4 minutes ago</small></div>
                                    </div>
                                </a></li>
                                <li><a rel="nofollow" href="#" class="dropdown-item">
                                    <div class="notification">
                                        <div class="notification-content"><i class="fa fa-upload bg-orange"></i>Server
                                            Rebooted
                                        </div>
                                        <div class="notification-time"><small>4 minutes ago</small></div>
                                    </div>
                                </a></li>
                                <li><a rel="nofollow" href="#" class="dropdown-item">
                                    <div class="notification">
                                        <div class="notification-content"><i class="fa fa-twitter bg-blue"></i>You have
                                            2 followers
                                        </div>
                                        <div class="notification-time"><small>10 minutes ago</small></div>
                                    </div>
                                </a></li>
                                <li><a rel="nofollow" href="#" class="dropdown-item all-notifications text-center">
                                    <strong>view all notifications </strong></a></li>
                            </ul>
                        </li>
                        <!-- Messages                        -->
                        <li class="nav-item dropdown"><a id="messages" rel="nofollow" data-target="#" href="#"
                                                         data-toggle="dropdown" aria-haspopup="true"
                                                         aria-expanded="false" class="nav-link"><i
                                class="fa fa-envelope-o"></i><span class="badge bg-orange badge-corner">10</span></a>
                            <ul aria-labelledby="notifications" class="dropdown-menu">
                                <li><a rel="nofollow" href="#" class="dropdown-item d-flex">
                                    <div class="msg-profile"><img src="img/avatar-1.jpg" alt="..."
                                                                  class="img-fluid rounded-circle"></div>
                                    <div class="msg-body">
                                        <h3 class="h5">Jason Doe</h3><span>Sent You Message</span>
                                    </div>
                                </a></li>
                                <li><a rel="nofollow" href="#" class="dropdown-item d-flex">
                                    <div class="msg-profile"><img src="img/avatar-2.jpg" alt="..."
                                                                  class="img-fluid rounded-circle"></div>
                                    <div class="msg-body">
                                        <h3 class="h5">Frank Williams</h3><span>Sent You Message</span>
                                    </div>
                                </a></li>
                                <li><a rel="nofollow" href="#" class="dropdown-item d-flex">
                                    <div class="msg-profile"><img src="img/avatar-3.jpg" alt="..."
                                                                  class="img-fluid rounded-circle"></div>
                                    <div class="msg-body">
                                        <h3 class="h5">Ashley Wood</h3><span>Sent You Message</span>
                                    </div>
                                </a></li>
                                <li><a rel="nofollow" href="#" class="dropdown-item all-notifications text-center">
                                    <strong>Read all messages </strong></a></li>
                            </ul>
                        </li>
                        <!-- Languages dropdown    -->
                        <li class="nav-item dropdown"><a id="languages" rel="nofollow" data-target="#" href="#"
                                                         data-toggle="dropdown" aria-haspopup="true"
                                                         aria-expanded="false"
                                                         class="nav-link language dropdown-toggle"><img
                                src="img/flags/16/GB.png" alt="English"><span
                                class="d-none d-sm-inline-block">下拉选择</span></a>
                            <ul aria-labelledby="languages" class="dropdown-menu">
                                <li><a rel="nofollow" href="#" class="dropdown-item"> <img src="img/flags/16/DE.png"
                                                                                           alt="English" class="mr-2">选项一</a>
                                </li>
                                <li><a rel="nofollow" href="#" class="dropdown-item"> <img src="img/flags/16/FR.png"
                                                                                           alt="English" class="mr-2">选项二
                                </a></li>
                            </ul>
                        </li>
                        <!-- Logout    -->
                        <li class="nav-item"><a href="/logout" class="nav-link logout"> <span
                                class="d-none d-sm-inline">注销登陆</span><i class="fa fa-sign-out"></i></a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="page-content d-flex align-items-stretch" style="font-size: 16px;">
        <!-- Side Navbar -->
        <nav class="side-navbar">
            <!-- Sidebar Header-->
            <div class="sidebar-header d-flex align-items-center">
                <div class="avatar"><img style="height: 100%;" src="img/docker.png" alt="..." class="img-fluid rounded-circle"></div>
                <div class="title">
                    <h1 class="h4">Mark Stephen</h1>
                    <p>Web Designer</p>
                </div>
            </div>
            <ul class="list-unstyled">
                <li :class="currentPage === '/pages/home/index.html' ? 'active' : ''"
                    @click="menuClick('/pages/home/index.html' ,$event)"><a href="/pages/home/index.html" data-pjax> <i
                        class="icon-home"></i>首页 </a></li>
            </ul>
            <span class="heading">DOCKER</span>
            <ul class="list-unstyled">
                <li :class="currentPage === '/pages/containers/index.html' ? 'active' : ''"
                    @click="menuClick('/pages/containers/index.html', $event)"><a href="/pages/containers/index.html"
                                                                                  data-pjax> <i class="icon-grid"></i>容器
                </a></li>
                <li :class="currentPage === '/pages/images/index.html' ? 'active' : ''"
                    @click="menuClick('/pages/images/index.html', $event)"><a href="/pages/images/index.html" data-pjax>
                    <i class="fa fa-bar-chart"></i>镜像 </a></li>
                <!--                <li>-->
                <!--                    <a href="#exampledropdownDropdownMenu" data-toggle="collapse">-->
                <!--                        <i class="icon-interface-windows"></i>下拉菜单-->
                <!--                    </a>-->
                <!--                    <ul id="exampledropdownDropdownMenu" class="collapse ">-->
                <!--                        <li><a href="#">Page</a></li>-->
                <!--                        <li><a href="#">Page</a></li>-->
                <!--                        <li><a href="#">Page</a></li>-->
                <!--                    </ul>-->
                <!--                </li>-->
            </ul>
            <span class="heading">对象存储</span>
            <ul class="list-unstyled">
                <li @click="menuClick('/pages/files/index.html')" :class="currentPage === '/pages/files/index.html' ? 'active' : ''">
                    <a href="/pages/files/index.html"> <i class="fa fa-file"></i>文件 </a>
                </li>
            </ul>
            <span class="heading">代码仓库</span>
            <ul class="list-unstyled">
                <li :class="currentPage === '/pages/repository/index.html' ? 'active' : ''"
                    @click="menuClick('/pages/repository/index.html', $event)"><a href="/pages/repository/index.html"
                                                                                  data-pjax> <i class="fa fa-file"></i>GIT
                </a></li>
            </ul>
            <span class="heading">项目管理</span>
            <ul class="list-unstyled">
                <li :class="currentPage === '/pages/project/index.html' ? 'active' : ''"
                    @click="menuClick('/pages/project/index.html', $event)"><a href="/pages/project/index.html"
                                                                                  data-pjax> <i class="fa fa-product-hunt"></i>项目
                </a></li>
            </ul>
        </nav>
        <div class="content-inner page-container">
        </div>
    </div>
</div>
<!-- JavaScript files-->
<script src="plugins/jquery/1.10.2/jquery.min.js"></script>
<script src="vendor/popper.js/umd/popper.min.js"></script>
<script src="plugins/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="vendor/jquery.cookie/jquery.cookie.js"></script>
<!--<script src="plugins/chart.js/2.7.0/Chart.min.js"></script>-->
<script src="vendor/jquery-validation/jquery.validate.min.js"></script>
<script src="js/jquery.pjax.js"></script>
<script src="js/ajax-util.js"></script>
<script src="js/vue.js"></script>
<script src="js/vue-plus.js"></script>
<!--<script src="js/charts-home.js"></script>-->
<script src="js/pageination.js"></script>
<script src="js/toastr.min.js"></script>
<script src="js/content.js"></script>
<!-- Main File-->
<script src="js/front.js"></script>
<script src="js/BeAlert.js"></script>
<script src="plugins/bootstrap/bootstrap-select.js"></script>
<script src="js/ws.js"></script>

<script>
    $(document).pjax('[data-pjax] a, a[data-pjax]', '.page-container');

    let currentPage = sessionStorage.getItem('currentPage');

    window.mvm = new Vue({
        el: '.page',
        data: {
            applicationContextRootPath: '/',
            currentPage: ''
        },
        created: function () {
            this.currentPage = sessionStorage.getItem('currentPage');
        },
        methods: {
            menuClick(h, e) {
                this.currentPage = h;
            },
            pageChange(page) {
                this.currentPage = page;
            }
        },
    });

    $.pjax({
        url: currentPage ? currentPage : mvm.applicationContextRootPath + 'pages/home/index.html',
        container: '.page-container'
    });

    $.extend($.validator.messages, {
        required: "这是必填字段",
        remote: "请修正此字段",
        email: "请输入有效的电子邮件地址",
        url: "请输入有效的网址",
        date: "请输入有效的日期",
        dateISO: "请输入有效的日期 (YYYY-MM-DD)",
        number: "请输入有效的数字",
        digits: "只能输入数字",
        creditcard: "请输入有效的信用卡号码",
        equalTo: "你的输入不相同",
        extension: "请输入有效的后缀",
        maxlength: $.validator.format("最多可以输入 {0} 个字符"),
        minlength: $.validator.format("最少要输入 {0} 个字符"),
        rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
        range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
        max: $.validator.format("请输入不大于 {0} 的数值"),
        min: $.validator.format("请输入不小于 {0} 的数值")
    });

    jQuery(document).bind('keyup', function(e) {
        if (e.keyCode == 13) {
            indexPage.pagequery();
        }
    });
</script>
</body>
</html>